<template>
    <div class="shop">
        <el-button size="mini" type="primary" @click="addFeeSetting">新增运费模版</el-button>
        
    <el-table
      :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
    <el-table-column label="模板ID" prop="id"></el-table-column>
    <el-table-column label="模版名称" prop="name"></el-table-column>
    <el-table-column label="模版描述" prop="describe"></el-table-column>
    <el-table-column label="操作" fixed="right">
       <template slot-scope="scope">
           <el-button size="mini" @click="editFeeDetail(scope.row.id)">编辑</el-button>
           <el-button size="mini" @click="delFreighttemplate(scope.row.id)">删除</el-button>
       </template>
    </el-table-column>

    </el-table>
          <!-- <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div> -->

      <!--新增行政区域-->
      <jdialog :title="frieghttitle" :visible.sync="isAddTemplateFee" width="720px">
          <div class="addTempladeName">
              <span>模版名称:</span>
              <el-input placeholder="请输入模版名称" size="mini" maxlength="32" v-model="name" style="width:572px;" show-word-limit></el-input>
          </div>
           <div class="addTempladeName">
              <span>模版描述:</span>
              <el-input placeholder="请输入模版描述" size="mini" maxlength="64" v-model="describe"  style="width:572px;" show-word-limit></el-input>
          </div>
          
          <el-table :data="regionData"
      style="width:88%;margin:20px;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor" type='index'>
      <el-table-column label="运送区域" >
          <template slot-scope="scope">
             {{scope.row.area}}
             <!-- <div style="color:#f4222d;cursor:pointer;float:right;" @click="editSelectCity(scope.row.region_ids)">编辑</div> -->
          </template>
      </el-table-column>
      <el-table-column label="是否包邮">
        <template slot-scope="scope">
            <el-select v-model="scope.row.is_free_freight" size="mini" placeholder="请选择是否包邮">
                <el-option value='0' label="不包邮"></el-option>
                <el-option value='1' label="包邮"></el-option>
            </el-select>
        </template>
      </el-table-column>
      <el-table-column label="当前区域增收运费比（倍数）">
          <template slot-scope="scope">
                     <el-input type="number" min="1" size="mini" v-model="scope.row.freight_rate">
                  </el-input> 
          </template>

      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button size='mini' @click="deleteSelCheckCity(scope.row.area,scope.row.region_ids)">删除</el-button>
          </template>
      </el-table-column>
      </el-table>
  
      <el-button size="mini" style="float:right;margin-right:50px;" @click="addTemplateRegionGroups">添加</el-button>

      <div style="margin:60px;text-align:center;">
          <el-button size="mini" @click="cancelTemplate">取消</el-button>
          <el-button size="mini" type="primary" @click="ceratinTemplate">确定</el-button>
      </div>
      </jdialog>

      <jdialog title="选择区域" :visible.sync="isShowRegionGroups" width='720px'>
          <p style="color:#f4222d;padding:12px 12px;">区域在同一个模版仅支持一次选择,已选区域会自动过滤</p>
          <div v-for="(item,index) in regionGroups" :key="'g'+index" style="margin:0 0 12px 12px;width:100%;height:30px;" >
              <!-- <el-checkbox style="" v-model="checkAllGroup[index]" @change="handleCheckAllChange(index)">{{item.name}}</el-checkbox>
              <el-checkbox-group v-model="checkedCities[index]" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in item.areas" :label="city" :key="city.id">{{city.name}}</el-checkbox>
              </el-checkbox-group> -->
            <div>

                <div class="icon-span-gray" v-if="selectAreaArray[index]=== true">
                 <i class="el-icon-check"></i>
                 </div>

                <div class="icon-span" v-else :class="checkAllGroup[index] === true ? 'icon-span-select':'icon-span'" @click="handleCheckAllChange(index)">
                 <i class="el-icon-check"></i>
                 </div>

                <p style="font-weight:700;float:left;margin-right:12px;color:#999;" v-if="selectAreaArray[index]=== true">{{item.name}}</p>
                 <p style="font-weight:700;float:left;margin-right:12px;" v-else>{{item.name}}</p>

                <div v-for="(city,loc) in item.areas" :key="'s'+loc" >
                    

                    <div class="icon-span-gray" v-if="selectCityIds[index][loc] !==0">
                         <i class="el-icon-check"></i>
                    </div>

                    <div class="icon-span"  v-else :class="checkCityGroup[index][loc] === true ? 'icon-span-select':'icon-span'" @click="handleCheckedCitiesChange(city.id,city.name,loc,index)">
                         <i class="el-icon-check"></i>
                    </div>
               
                    <p style="float:left;margin-right:12px;color:#999;" v-if="selectCityIds[index][loc] !==0">{{city.name}}</p>
                    <p style="float:left;margin-right:12px;" v-else>{{city.name}}</p>
                </div>
            </div>
             
          </div>
          <div style="text-align:center;margin-bottom:20px;">
              <el-button size="mini" @click="cancelCityselect">取消</el-button>
              <el-button type="primary" size="mini" @click="certainCitySelect">确定</el-button>
          </div>
      </jdialog>
    </div>
</template>

<script>
import { freightTemplateList, freightTemplateAdd, freightRegionGroups, delFreighttemplate, freightTemplateDetailData, freightTemplateEdit} from '@/api/autarky'
export default {
    data () {
        return {
            currentId:'',
          tableData:[],
        //    page:1,
        //    size:20,
        //    total: 0,
        frieghttitle:'新增运费模版(不包邮区域)',
        //运费模版
          isAddTemplateFee:false,
          regionData:[],
          name:'',
          describe:'',
        //行政区域
         isShowRegionGroups:false,
         regionGroups:[],
         isIndeterminateGroup:[],
         checkAllGroup:[],
         checkedCities:[],
         checkCityName:[],
         checkCityGroup:[],

         selectCityIds:[],
         selectAreaArray:[]
        }
    },
    created () {
     this.getfreightTemplateListData()
     this.getfreightRegionGroupsData()
    },
    methods: {
      //新增运费模版
      addFeeSetting () {
        this.frieghttitle =   '新增运费模版(不包邮区域)'
        this.isAddTemplateFee = true
        this.name = '',
        this.describe = '',
        this.regionData = []
        this.currentId = ''
      },
      //获取模版区域
      addTemplateRegionGroups() {
        this.isShowRegionGroups = true
        console.log(this.checkAllGroup)
      },
  
      handleCheckAllChange(index) {

          if(this.checkAllGroup[index] === false){

            this.checkAllGroup[index] = true
            var citySelArr = []
            var cityarr = []
            // var cityIdarr = []
           
            this.regionGroups[index].areas.map(sel => {
                citySelArr.push(sel)
                cityarr.push(true)
                // cityIdarr.push(sel.id)
            })
            this.checkedCities[index] = citySelArr
            this.checkCityGroup[index] = cityarr
            // this.selectCityIds[index]   = cityIdarr
            console.log(this.checkedCities)
            console.log(this.checkCityGroup)
            // console.log(this.selectCityIds)
          }else{
            this.checkAllGroup[index]  = false
               
             this.checkCityGroup[index].map((item => {
                 console.log(item)
                
             }))
      

             var citySelArr1 = []
              var cityarr1 = []
                // var cityIdarr1 = []
              this.regionGroups[index].areas.map(sel => {
                console.log(sel)
                 cityarr1.push(false)
                //  cityIdarr1.push(0)
                citySelArr1.push({})
            })
            this.checkedCities[index] = citySelArr1
            this.checkCityGroup[index] = cityarr1
            // this.selectCityIds[index] = cityIdarr1
            console.log(this.checkedCities)
            console.log(this.checkCityGroup)
            // console.log(this.selectCityIds)
          }
          this.$forceUpdate()
        // this.checkedCities[index] = val ? cityOptions : [];
        // this.isIndeterminate[index] = false;
      },
     handleCheckedCitiesChange(id,name,loc,index) {
          if(this.checkCityGroup[index][loc] === false){
            this.checkCityGroup[index][loc] = true
            this.checkedCities[index][loc] = this.regionGroups[index].areas[loc]
            // this.selectCityIds[index][loc] = id
          }else{
            this.checkCityGroup[index][loc] = false
            this.checkedCities[index][loc] = {}
            // this.selectCityIds[index][loc] = 0
          }
         
          this.$forceUpdate()
        // let checkedCount = value.length;
        // this.checkAll = checkedCount === this.cities.length;
        // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      cancelCityselect(){
        this.isShowRegionGroups = false
        console.log(this.selectAreaArray)
      },
      //编辑所选城市
      // editSelectCity(idArr){
      // //  idArr.map()
      // },
      //确定所选择城市
      certainCitySelect(){
       //判断所选城市是否包含已选城市
        var idArr = []
        var nameArr = []
        this.checkedCities.map((item,index) => {
          item.map((cc,loc)=> {
            if(cc&& cc.id && cc.name){
              idArr.push(cc.id)
              nameArr.push(cc.name)
              // var index = item.indexOf(cc)
              // item.splice(index,1)
              this.selectCityIds[index][loc] = cc.id
            }
          })
        })
   
        if(idArr.length){
          var t  = false
          this.regionData.map(item => {
            if(item && item.region_ids){
               idArr.map(ccId => {
                 if( item.region_ids.indexOf(ccId)> -1){
                   t = true
                   return;
                 }
               })

               if(t){
                 return
               }
            }
          })

          if(t){
            this.$message.error('不能包含已经选择城市或者区域')
            
            return
          }else{
               this.checkAllGroup.map((item,index) => {
          if(item){
            this.selectAreaArray[index] = true
          }
          })
            var  checkArr  = []
            var  checkCityArr = []
            this.checkCityGroup.map(ss => {
              var  ssArr = []
              var  ccarr = [] 
                  ss.map(ff => {
                    console.log(ff)
                      ssArr.push(false)
                      ccarr.push({})
                  })
              checkArr.push(ssArr)
              checkCityArr.push(ccarr)
            })
            this.checkCityGroup = checkArr 
            this.checkedCities = checkCityArr
            console.log(this.checkCityGroup)
            console.log(this.checkedCities)

            this.isShowRegionGroups = false
            this.regionData.push({area:nameArr.join(','),is_free_freight:'',freight_rate:'', region_ids:idArr})
          }

        }else{
           this.$message.error('所选城市不能为空')
           
        }
         
      },
      //删除所选区域
      deleteSelCheckCity(name,arrids){
        this.regionData.map((item,index)=> {
            if(item.area == name){
                this.regionData.splice(index,1)
            }
        })

      var areaarr = [];
      this.checkAllGroup.map(item=> {
        console.log(item)
        areaarr.push(false)
      })
      this.selectAreaArray = areaarr
       
        //同时把所选的id设置为可以选择
        arrids.map(idItem => {
          this.selectCityIds.map((item,index) => {
             item.map((cc,loc) => {
                if(cc == idItem){
                  this.selectCityIds[index][loc] = 0
                  this.checkAllGroup[index] = false
                }
             })
          })
        })
        
      },
      //取消模版
      cancelTemplate(){
         this.isAddTemplateFee = false
         //把已经选的id选定为空
         this.regionData = []
         this.selectCityIds = []
         this.checkAllGroup = []
         this.checkCityGroup = []
         this.checkedCities = []
         this.selectAreaArray = []
         this.regionGroups.map(item => {
            console.log(item)
            this.checkAllGroup.push(false)
            this.selectAreaArray.push(false)
            var arr = []
            var checkcArr = []
            var idarr = []
            item.areas.map(city => {
                console.log(city)
                arr.push(false)
                checkcArr.push({})
                idarr.push(0)
            })
            this.checkCityGroup.push(arr)
            this.checkedCities.push(checkcArr)
            this.selectCityIds.push(idarr)

        
        })
      },
      //确定模版
       ceratinTemplate(){
           if(!this.name){
               this.$message.error('模版名称不能为空')
               return
           }
           if(!this.describe){
               this.$message.error('模版描述不能为空')
               return
           }
           if(this.regionData.length == 0){
             this.$message.error('运送区域不能为空')
               return
           }
          var t = true
          this.regionData.map(item => {
 
              if(item.is_free_freight && item.freight_rate >= 1){
                  t = true
              }else{
                  t = false
              }
          })
          if(!t){
              this.$message.error('选择包邮的区域运费比例默认为0,不包邮的运费比例不能低于1')
              return
          }
          if(this.currentId){
            this.getfreightTemplateEditData()
          }else{
             this.getfreightTemplateAdd()
          }
         
         
       },
       //删除模版
       delFreighttemplate(id){
            this.$confirm('确认删除该模版？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.delFreighttemplateData(id)
      }).catch(() => {
        console.log('cancel')
      });
       },
       async delFreighttemplateData(id){
           let res  = await delFreighttemplate(id)
           if(res.code === 10000){
              this.$message.success(res.message)
              this.getfreightTemplateListData()
           }else{
               this.$message.error(res.message)
           }
       },
      pageChange(page){
          this.page = page
          //获取数据
          this.getfreightTemplateListData()
      },
      //获取模版列表
      async getfreightTemplateListData () {
        // var url  = 'page='+this.page+
        //            '&size='+this.size
       let res = await freightTemplateList()

       if(res.code === 10000){
         this.tableData = res.data
       }else{
           this.$message.error(res.message);
           
       }
      },
          //获取详情
      editFeeDetail(id){
        this.frieghttitle = '编辑运费模版(不包邮区域)'
         this.currentId = id
         this.regionData = []
        this.getfreightTemplateDetailData(id)
      },
      //获取模版详情
      async getfreightTemplateDetailData(id){
        let res = await freightTemplateDetailData({id:id})
       if(res.code === 10000){
         this.name = res.data.name
         this.describe = res.data.describe
         
 
         if(res.data.zone_config.length >1){
              var regionArr = []
                 this.regionGroups.map((item,index) => {
                item.areas.map((cc,loc)=> {
                 
                   res.data.zone_config.map(config => {
                     if(config.region_id == cc.id){
                         this.selectCityIds[index][loc] =cc.id
                     }
                   })
                })
             })
            // console.log(res.data.zone_config)
            var ttconfig = res.data.zone_config
             for(var  i = 0;i<ttconfig.length;i++){

               var obj1=  ttconfig[i]
               var arr  = [obj1]
               for(var j = i+1;j<ttconfig.length;j++){
                 var obj2 = ttconfig[j]
                  if(obj2.is_free_freight === obj1.is_free_freight && obj2.freight_rate === obj1.freight_rate){
                  arr.push(obj2)
                  ttconfig.splice(j,1)
                  j = j - 1;  
                 }
                 
               }
               regionArr.push(arr)
             }

          
            //  console.log(this.selectCityIds)

             regionArr.map(item=>{
               var cityname = []
               var idArr = []
                var is_free_freight = String(item[0].is_free_freight)
               var freight_rate = String(item[0].freight_rate )
                 item.map(tt => {
                    this.regionGroups.map(regionItem => {
                    regionItem.areas.map(cc => {
                    if(cc.id == tt.region_id){
                      cityname.push(cc.name)
                      idArr.push(cc.id)
                    return
                    }
                  })
                })

              })
              this.regionData.push({region_ids:idArr,is_free_freight:is_free_freight,freight_rate:freight_rate,area:cityname.join(',')})
             })
             this.name = res.data.name
             this.describe = res.data.describe
             this.isAddTemplateFee = true
         }else if(res.data.zone_config.length == 1){
           var cityename = ''
           this.regionGroups.map(regionItem => {
              regionItem.areas.map(cc => {
                if(cc.id == res.data.zone_config[0].region_id){
                    cityename = cc.name
                    return
                }
              })
           })
           this.regionData.push({region_ids:[res.data.zone_config[0].region_id],is_free_freight:String(res.data.zone_config[0].is_free_freight),freight_rate:String(res.data.zone_config[0].freight_rate),area:cityename})
         }

       
       }else{
           this.$message.error(res.message)
       }
      },
      //行政区域分组列表
      async getfreightRegionGroupsData() {
        let res = await freightRegionGroups()
        this.regionGroups = res.data
        res.data.map(item => {
            console.log(item)

            this.checkAllGroup.push(false)
            this.selectAreaArray.push(false)
            var arr = []
            var checkcArr = []
            var idarr = []
            item.areas.map(city => {
                console.log(city)
                arr.push(false)
                checkcArr.push({})
                idarr.push(0)
            })
            this.checkCityGroup.push(arr)
            this.checkedCities.push(checkcArr)
            this.selectCityIds.push(idarr)
        })
      },
      //新增模版
       async  getfreightTemplateAdd(){
           var arr = []
           this.regionData.map(item => {
             if(item.is_free_freight == 1){
               item.freight_rate = 0
             }
               arr.push({
                   region_ids:item.region_ids,
                    is_free_freight:item.is_free_freight,
                    freight_rate:item.freight_rate
               })
           }) 
           var form  = {
               name:this.name,
               describe:this.describe,
               zone_config:JSON.stringify(arr)
           }
           let res = await freightTemplateAdd(form)
           if(res.code === 10000){
               this.$message.success(res.message)
               this.isAddTemplateFee = false
               this.getfreightTemplateListData()
               this.name = ''
               this.describe = ''
               this.regionData = []
               this.selectAreaArray = []
               this.selectCityIds = []
               this.checkAllGroup = []
               this.regionGroups.map(item => {
            this.checkAllGroup.push(false)
            this.selectAreaArray.push(false)
            var arr = []
            var checkcArr = []
            var idarr = []
            item.areas.map(city => {
                console.log(city)
                arr.push(false)
                checkcArr.push({})
                idarr.push(0)
            })
            this.checkCityGroup.push(arr)
            this.checkedCities.push(checkcArr)
            this.selectCityIds.push(idarr)
        })
           }else{
               this.$message.error(res.message)
           }
       },

       //编辑模版
      async getfreightTemplateEditData(){
         var arr = []
           this.regionData.map(item => {
               arr.push({
                   region_ids:item.region_ids,
                    is_free_freight:item.is_free_freight,
                    freight_rate:item.freight_rate
               })
           }) 
        var form = {
          id:this.currentId,
          name:this.name,
          describe :this.describe,
          zone_config:JSON.stringify(arr)
        }
        let res = await freightTemplateEdit(form)
        if(res.code === 10000){
          this.$message.success(res.message)
          this.isAddTemplateFee = false
          this.name = ''
          this.currentId= ''
          this.regionData = []
          this.describe = ''
          this.selectAreaArray = []
          this.selectCityIds = []
          this.getfreightTemplateListData()
          this.regionGroups.map(item => {
            this.checkAllGroup.push(false)
            this.selectAreaArray.push(false)
            var arr = []
            var checkcArr = []
            var idarr = []
            item.areas.map(city => {
                console.log(city)
                arr.push(false)
                checkcArr.push({})
                idarr.push(0)
            })
            this.checkCityGroup.push(arr)
            this.checkedCities.push(checkcArr)
            this.selectCityIds.push(idarr)
              console.log(this.selectCityIds)
        })
        }else{
          this.$message.error(res.message)
        }
      },
      tc() {
      return "text-align:center; color:#333333; font-size:12px;";
      },
      tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
      },
    },

}
</script>
<style lang="scss" scoped>
.shop{
    padding: 20px;
    .pagination{
        float: right;
    }
    .addTempladeName{
        margin:20px;
        span{
            font-size: 13px;
            margin-right: 8px;
            color: #666666;
        }
    }

    .icon-span{
        width: 20px;
        height: 20px;
        border: 1px solid #d8d8d8;
        background-color: #fff;
        text-align: center;
        margin-right: 8px;
        float: left;
        line-height: 20px;
        i{
            color: #fff;
        }
        
    }
    .icon-span-gray{
      width: 20px;
        height: 20px;
        border: 1px solid #d8d8d8;
        background-color: #f8f8f8;
        text-align: center;
        margin-right: 8px;
        float: left;
        line-height: 20px;
        i{
            color: #666;
        }
    }
    .icon-span-select{
        background-color: #f4222d;
        i{
           color: #fff;
        }

    }

   
 

 
  
}
  //  handleCheckAllChange(index) {
  //       //   this.areapos = index
  //       //   this.clickPro = this.checkCityGroup[index].length
  //         if(this.checkAllGroup[index] === false){
  //             this.checkAllGroup[index] = true
            //   var check = []
            //   this.checkAllGroup.map(item => {
            //       console.log(item)
            //       check.push(false)
            //   })
            //   check[index] =  true
            //   this.checkAllGroup  = check

              //同时把所选城市的id全部放进新的数组
            // var cityarr = []
            // this.checkCityGroup.map((item,lc) => {
            //     console.log(item)
            //     var arr = []
            //     if(lc === index){
            //        item.map(city => {
            //           console.log(city)
            //           arr.push(true)
            //        })
            //     }
            //     // }else{
            //     //      item.map(city => {
            //     //       console.log(city)
            //     //       arr.push(false)
            //     //    })
            //     // }
            //     cityarr.push(arr)
            // })
            // this.checkCityGroup[index].map(item =>{
            //     console.log(item)
            //     cityarr.push(true)
            // })
            // this.checkCityGroup[index] = cityarr

          //   var citySelArr = []
          //   var nameArr = []
        
          //   this.regionGroups[index].areas.map(sel => {
          //       citySelArr.push(sel.id)
          //       nameArr.push(sel.name)
          //   })
          //   this.checkedCities = citySelArr
          //   this.checkCityName = nameArr
          // }else{
          //   this.checkedCities = []
          //   this.checkCityName = []
            // var check1= []
            //   this.checkAllGroup.map(item => {
            //       console.log(item)
            //       check1.push(false)
            //   })
            //   check1[index] =  true
              // this.checkAllGroup[index]  = false
              //   var cityarr1 = []
            // this.checkCityGroup.map((item,lc) => {
            //     console.log(item)
            //     var arr = []
            //     if(lc === index){
            //        item.map(city => {
            //           console.log(city)
            //           arr.push(true)
            //        })
            //     }else{
            //       item.map(city => {
            //           console.log(city)
            //           arr.push(false)
            //        })
            //     }
            //     cityarr1.push(arr)
            // })
          //    this.checkCityGroup[index].map((item => {
          //        console.log(item)
          //        cityarr1.push(false)
          //    }))
          //   this.checkCityGroup[index] = cityarr
            
          // }
          // this.$forceUpdate()
        // this.checkedCities[index] = val ? cityOptions : [];
        // this.isIndeterminate[index] = false;
      // },

        // if(index === this.areapos){
        //      if(this.checkCityGroup[index][loc] === false){
        //         ++this.clickPro;
        //         console.log(this.clickPro)
        //      if(this.clickPro === this.checkCityGroup[index].length){
        //         this.checkAllGroup[index] = true
                 
        //      }
        //       this.checkCityGroup[index][loc] = true
        //       //同时把所选城市的id全部放进新的数组
        //       this.checkedCities.push(id)
        //       this.checkCityName.push(name)
        //   }else{
        //    this.clickPro--;
        //        console.log(this.clickPro)
        //      if(this.clickPro === this.checkCityGroup[index].length){
        //         this.checkAllGroup[index] = true
        //           this.checkedCities.splice(loc,1)
        //           this.checkCityName.splice(loc,1)
        //      }
        //    this.checkCityGroup[index][loc] = false
           
        //    this.checkAllGroup[index] = false
        //   }
 
        //  }else{
        //      this.checkedCities = []
        //      this.checkedCities.push(id)
        //       this.checkCityName =[]
        //       this.checkCityName.push(name)
        //      this.clickPro = 1 
        //     var arr = []
        //     this.checkAllGroup.map(item => {
        //         console.log(item)
        //         arr.push(false)
        //     })
        //     this.checkAllGroup = arr
        //     if(this.checkCityGroup[index][loc] === false){
        //       this.checkCityGroup[index][loc] = true
        //       //同时把所选城市的id全部放进新的数组
        //       if(this.areapos !== 100){
        //           var cityArr = []
        //           this.checkCityGroup[this.areapos].map(city => {
        //              console.log(city)
        //              cityArr.push(false)
        //           })
        //           this.checkCityGroup[this.areapos] = cityArr
        //       }
        //      this.checkCityGroup
        //   }else{
        //    this.checkCityGroup[index][loc] = false
        //   }

        // if(index !== this.areacitypos){
        //     if(this.areacitypos !== 100){
        //         var cccArr = []
        //        this.checkCityGroup[this.areacitypos].map(ccc => {
        //            console.log(ccc)
        //            cccArr.push(false)
        //        })
        //        this.checkCityGroup[this.areacitypos] = cccArr
        //     }
        //   }
        //  }
        //  this.areapos = index
        //  this.areacitypos = index
        //   this.$forceUpdate()
</style>

